<template>
  <!--终端管理 杨灿-->
  <div>
    <el-row>
      <el-col :span="5" :offset="1">
        <el-input
          placeholder="请输入类别名称或编号"
          v-model="message"
          clearable>
        </el-input>

      </el-col>
      <el-col :span="1">
        <el-button icon="el-icon-search" circle></el-button>
      </el-col>

      <el-col :span="4" :offset="12">
        <el-button @click="exportTerminal">导出</el-button>
        <el-button type="primary" @click="dialogVisible=true">新增</el-button>
      </el-col>
    </el-row>
    <el-divider></el-divider>
    <el-row>
      <el-col :span="24">
        <el-table
          :data="tableData"
          border
          style="width: 100%">
          <el-table-column
            fixed
            prop="id"
            label="序号"
           >
          </el-table-column>
          <el-table-column
            prop="storeBean.storeName"
            label="门店名称"
            >
          </el-table-column>
          <el-table-column
            prop="terminalNum"
            label="终端编码"
           >
          </el-table-column>
          <el-table-column
            prop="uniqueNum"
            label="唯一码"
            >
          </el-table-column>
          <el-table-column
            prop="terminalName"
            label="设备名称"
            >
          </el-table-column>
          <el-table-column
            prop="terminalStatus"
            label="状态"
            :formatter="getStatusFormat">
          </el-table-column>
          <el-table-column
            prop="registerTime"
            label="登记日期"
            :formatter="dateToString">
          </el-table-column>
          <el-table-column
            prop="updateTime"
            label="更新日期"
          >
          </el-table-column>
          <el-table-column
            fixed="right"
            label="操作"
            >
            <template slot-scope="scope">
              <el-button @click="handleClick(scope.row)" type="text" size="small">修改</el-button>
              <el-button type="text" size="small">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="16" :offset="4">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="currentPage"
          :page-size="pagesize"
          layout="prev, pager, next, jumper"
          :total="totalCount">
        </el-pagination>
      </el-col>
    </el-row>

    <el-dialog
      title="创建终端"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose">
      <el-form ref="form" :model="form" label-width="90px">
        <el-form-item label="门店编码">
          <el-input v-model="form.id"  :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="门店名称">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="唯一码">
          <el-input v-model="form.address"></el-input>
        </el-form-item>
        <el-form-item label="设备名称">
          <el-input v-model="form.id"></el-input>
        </el-form-item>


        <el-form-item label="状态">
          <el-radio-group v-model="form.resource">
            <el-radio label="开启"></el-radio>
            <el-radio label="关闭"></el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
  </span>
    </el-dialog>
  </div>
</template>

<script>
  import axios from 'axios';
    export default {

        dialogVisible: false,
        name: "TerminalManager",
        created () {
          this.getData(1)
        },
        methods: {
          exportTerminal: function(){
            window.location.href="http://localhost:9100/terminal/exportAll?userId=1";
          },
          getStatusFormat: function(row){
            //衣服函数 ，用于转换显示
            if (row.storeStatus == 1) {
              return "关闭";
            } else {
              return "开启";
            }
          },
        handleClick(row) {
          console.log(row);
        },
        handleSizeChange(val) {
          this.pagesize = val;
          console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val) {
          this.currentPage = val;
          console.log(`当前页: ${val}`);
        },
        handleClose(done) {
            this.$confirm('确认关闭？')
              .then(_ => {
                done();
              })
              .catch(_ => {});
        },
          getData: function(){
            let url = 'http://localhost:9100/terminal/allByPage';

            // 配置url参数
            let params = {

              currentPage:this.currentPage,
              userId:1
            }

            // 发起axios请求接口

            axios.get(url, {params})
              .then(res => {
                // 得到后台数据
                //赋值给tableData
                console.info(res);
                this.tableData=res.data.data.list;
                this.totalCount=res.data.data.total;

              })
              // 响应失败
              .catch(err => {
                alert('链接错误')
              })
          },
          dateToString: function(row){

            let s=row.registerTime;
            //将后台传过来的valueOf格式的时间改成yyyy/m/d的格式
            const
              date = new Date(s),
              y = date.getFullYear(),
              m = date.getMonth() + 1,
              d = date.getDate()

            return `${y}/${m < 10 ? '0'+m : m}/${d < 10 ? '0' + d : d}`
          },
      },

      data() {
        return {
          form: {
            name: '',
            region: '',
            date1: '',
            date2: '',
            delivery: false,
            type: [],
            resource: '',
            desc: '',
            address: ''
          },
          dialogVisible:false,
          message: '',
          tableData: [],
          //默认每页数据量
          pagesize: 5,

          //当前页码
          currentPage: 1,

          //查询的页码
          start: 1,

          //默认数据总数
          totalCount: 1,
        }
      }
    }
</script>

<style scoped>

</style>
